﻿<template>
    <div v-cloak>
        <div v-on:click="openData">
            <span v-if="!currentDate" class="color-999">{{placeholder}}</span>
            <span v-else class="color-black-1">{{currentDate}}</span>
        </div>
        <hxt-popup v-model="show" round :closeable="closeable" :close-on-click-overlay="closeOnClickOverlay">
            <div class="flex-column">
                <van-datetime-picker :type="type" v-model="timestamp" v-on:confirm="onConfirm" v-on:cancel="show=false" :title="title" :formatter="formatter" :filter="filter" :max-date="maxDate" :min-date="minDate" :min-hour="minHour" :max-hour="maxHour" :min-minute="minMinute" :max-minute="maxMinute" :show-toolbar="showToolbar" :confirm-button-text="confirmButtonText" :cancel-button-text="cancelButtonText"></van-datetime-picker>
            </div>
        </hxt-popup>
    </div>
</template>
<script>
    module = (function (hxt) {
        return {
            name: 'hxt.datetimePicker',
            props: {
                value: {
                    type: Object,
                    'default': function () {
                        return null;
                    }
                },
                title: {//标题
                    type: String,
                    'default': function () {
                        return '';
                    }

                },
                type: {//时间类型，可选值为 date datetime year-month time
                    type: String,
                    'default': function () {
                        return 'date';
                    }
                },
                maxDate: {//最大时间
                    type: Number,
                    'default': function () {
                        return hxt.dateAdd('y', +1, hxt.dateFormat('yyyy-MM-dd'));
                    }
                },
                minDate: {//最小时间
                    type: Number,
                    'default': function () {
                        return hxt.dateAdd('y', -0, hxt.dateFormat('yyyy-MM-dd'));
                    }
                },
                maxHour: {//最大小时
                    type: Number,
                    'default': function () {
                        return 23;
                    }
                },
                minHour: {//最小小时
                    type: Number,
                    'default': function () {
                        return 0;
                    }
                },
                maxMinute: {//最大分钟
                    type: Number,
                    'default': function () {
                        return 59;
                    }
                },
                minMinute: {//最小分钟
                    type: Number,
                    'default': function () {
                        return 0;
                    }
                },
                showToolbar: {//是否显示顶部栏
                    type: Boolean,
                    'default': function () {
                        return true;
                    }
                },
                confirmButtonText: {//确认按钮文字
                    type: String,
                    'default': function () {
                        return '确认';
                    }
                },
                cancelButtonText: {//取消按钮文字
                    type: String,
                    'default': function () {
                        return '取消';
                    }
                },
                formatter: {//选项格式化函数(type 可能值为 year, month, day, hour, minute)
                    type: Function,
                    'default': function (type, value) {
                        if (type === 'year') {
                            return value + '年';
                        }
                        if (type === 'month') {
                            return value + '月';
                        }
                        if (type === 'day') {
                            return value + '日';
                        }
                        if (type === 'hour') {
                            return value + '时';
                        }
                        if (type === 'minute') {
                            return value + '分';
                        }
                        return value;
                    }
                },
                filter: {//选项过滤函数(type 可能值为 year, month, day, hour, minute)
                    type: Function,
                    'default': null
                },
                placeholder: {
                    type: String,
                    'default': function () {
                        return '请选择';
                    }
                },
                closeOnClickOverlay: {//是否在点击遮罩层后关闭
                    type: Boolean,
                    'default': function () {
                        return true;
                    }
                },
                closeable: {//是否显示关闭图标
                    type: Boolean,
                    'default': function () {
                        return false;
                    }
                },
                round: {// 	是否显示圆角
                    type: Boolean,
                    'default': function () {
                        return false;
                    }
                }
            },
            data: function () {
                return {
                    show: false,
                    timestamp: this.type == 'time' ? this.value : hxt.dateAdd('M', 0, hxt.dateFormat('yyyy-MM-dd hh:mm', this.value || null))
                }
            },
            computed: {
                currentDate: {
                    get: function () {
                        return this.value;
                    },
                    set: function (val) {
                        this.$emit('input', val);
                    }
                }
            },
            watch: {
                value: function (val) {
                    this.timestamp = hxt.dateAdd('M', 0, hxt.dateFormat('yyyy-MM-dd hh:mm', val));
                }
            },
            activated: function () {

            },
            mounted: function () {
                //console.log(this.msg)
            },
            methods: {
                openData: function () {
                    var _this = this;
                    if (!!_this.disabled) return;
                    _this.show = true;
                },
                onConfirm: function (e) {
                    console.log(e)
                    var _this = this, formatStr = _this.type == 'year-month' ? 'yyyy-MM' : _this.type == 'datetime' ? 'yyyy-MM-dd hh:mm' : _this.type == 'time' ? 'hh:mm' : 'yyyy-MM-dd';
                    _this.currentDate = _this.type == 'time' ? e : hxt.dateFormat(formatStr, e);
                    _this.timestamp = e;
                    _this.show = false;
                },
                getDate: function (interval, number) {
                    return hxt.dateAdd(interval, number, hxt.dateFormat('yyyy-MM-dd hh:mm'))
                },
            },
            components: {

            }
        };
    })(window.$jscript.fn);
</script>
<style>
</style>